<template>
  <div class="User-container">
    <v-skeleton-loader
      v-if="loading"
      height="100%"
      type="list-item@20"
    ></v-skeleton-loader>
    <v-row v-else class="ma-0 align-start main-wrap">
      <v-col class="pa-0 pr-2 treeGroup-wrap" :cols="4">
        <tree-group
          v-model="selectedUser"
          :open.sync="openTeamIndex"
          :items="teamList"
        ></tree-group>
      </v-col>
      <v-col
        v-if="selectedUser || showProfile"
        class="pa-0 pl-2 profile-wrap"
        :cols="8"
      >
        <Profile
          @add="addUser"
          @edit="editUser"
          ref="profile"
          :data="selectedUser"
        ></Profile>
      </v-col>
    </v-row>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import TreeGroup from "@/components/Maintenance/Tree/TreeGroup.vue";
import Profile from "@/components/Maintenance/Profile/Profile.vue";
import { IMember, ITeam } from "@/components/Maintenance/index";
@Component({
  components: {
    TreeGroup,
    Profile,
  },
})
export default class User extends Vue {
  loading = false;
  showProfile = false;
  openTeamIndex: number[] = [];

  selectedUser: IMember | null = null;

  teamList: ITeam[] = [];
  getTeamList() {
    this.loading = true;
    setTimeout(() => {
      this.teamList = [
        {
          id: "1",
          team: "Admin",
          department: "ADM",
          peopleNum: 3,
          memberList: [
            {
              userId: "1",
              userName: "Angela Lo",
              shortName: "Angela",
              avatar:
                "https://cdn.pixabay.com/photo/2018/08/31/02/27/cat-3643705__340.jpg",
              email: "angelachan@yahoo.com",
              team: "Team 1",
              department: "ADM",
              password: "135246103",
              tel: "5023 2499",
              language: "English",
              head: "Amy Chan",
              status: "Active",
              userGroup: ["Customer Service Team", "Group 11"],
              colour: "",
              right: [
                "View all information",
                "Edit all reocrd",
                "Announcement",
              ],
              locationCode: {
                contact: ["1"],
                location: ["1"],
              },
              children: [
                {
                  userId: "2",
                  userName: "Ken Wong",
                  shortName: "Ken",
                  avatar:
                    "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712__340.jpg",
                  email: "Kenwong@yahoo.com",
                  team: "Team 1",
                  department: "ADM",
                  password: "135246103",
                  tel: "5023 2499",
                  language: "Chinese",
                  head: "Amy Chan",
                  status: "Active",
                  userGroup: ["Group 11"],
                  colour: "",
                  right: ["View all information", "Announcement"],
                  locationCode: {
                    contact: ["1"],
                    location: [],
                  },
                },
                {
                  userId: "3",
                  userName: "Kin Fei To",
                  shortName: "Kin",
                  avatar:
                    "https://cdn.pixabay.com/photo/2015/10/30/20/13/boat-1014711__340.jpg",
                  email: "Kinfeiwonng@yahoo.com",
                  team: "Team 1",
                  department: "ADM",
                  password: "135246103",
                  tel: "5023 2499",
                  language: "English",
                  head: "Amy Chan",
                  status: "Active",
                  userGroup: ["Group 7", "Group 11"],
                  colour: "",
                  right: ["View all information"],
                  locationCode: {
                    contact: [],
                    location: ["1"],
                  },
                },
              ],
            },
          ],
        },
        {
          id: "2",
          team: "Customer Service Team",
          department: "CS",
          peopleNum: 4,
          memberList: [
            {
              userId: "4",
              userName: "Mark Wong",
              shortName: "MARK",
              avatar:
                "https://cdn.pixabay.com/photo/2013/07/25/01/31/forest-166733__340.jpg",
              email: "angelachan@yahoo.com",
              team: "Team 1",
              department: "CS",
              password: "135246103",
              tel: "5023 2499",
              language: "English",
              head: "Amy Chan",
              status: "Active",
              userGroup: ["Admin", "Group 11"],
              colour: "",
              right: ["Announcement"],
              locationCode: {
                contact: [],
                location: ["1"],
              },
              children: [
                {
                  userId: "5",
                  userName: "Amy Chan",
                  shortName: "AMY",
                  avatar:
                    "https://cdn.pixabay.com/photo/2022/10/19/01/02/woman-7531315__340.png",
                  email: "Kenwong@yahoo.com",
                  team: "Team 1",
                  department: "CS",
                  password: "135246103",
                  tel: "5023 2499",
                  language: "English",
                  head: "Amy Chan",
                  status: "Active",
                  userGroup: ["Field Service Engineer", "Project Team"],
                  colour: "",
                  right: ["Edit all reocrd"],
                  locationCode: {
                    contact: [],
                    location: [],
                  },
                },
                {
                  userId: "6",
                  userName: "Nicole Chan",
                  shortName: "Nicole",
                  avatar:
                    "https://cdn.pixabay.com/photo/2020/10/23/17/52/fox-5679446__340.png",
                  email: "Kinfeiwonng@yahoo.com",
                  team: "Team 1",
                  department: "CS",
                  password: "135246103",
                  tel: "5023 2499",
                  language: "English",
                  head: "Amy Chan",
                  status: "Active",
                  userGroup: ["Field Service Engineer", "Project Team"],
                  colour: "",
                  right: [],
                  locationCode: {
                    contact: ["1"],
                    location: [],
                  },
                },
                {
                  userId: "7",
                  userName: "Ace Tang",
                  shortName: "Ace",
                  avatar:
                    "https://cdn.pixabay.com/photo/2016/05/24/16/48/mountains-1412683__340.png",
                  email: "wendytam @yahoo.com",
                  team: "Team 1",
                  department: "CS",
                  password: "135246103",
                  tel: "5023 2499",
                  language: "English",
                  head: "Amy Chan",
                  status: "Active",
                  userGroup: ["Field Service Engineer"],
                  colour: "",
                  right: ["View all information"],
                  locationCode: {
                    contact: ["1"],
                    location: [],
                  },
                },
              ],
            },
          ],
        },
        {
          id: "3",
          team: "Field Service Engineer",
          department: "FSE",
          peopleNum: 5,
          memberList: [
            {
              userId: "8",
              userName: "Eric Chou",
              shortName: "Eric",
              avatar:
                "https://cdn.pixabay.com/photo/2017/08/06/12/06/people-2591874__340.jpg",
              email: "ericko@yahoo.com",
              team: "Team 1",
              department: "FSE",
              password: "135246103",
              tel: "5023 2499",
              language: "English",
              head: "Amy Chan",
              status: "Active",
              userGroup: ["Field Service Engineer", "Project Team"],
              colour: "",
              right: ["Edit all reocrd", "Announcement"],
              locationCode: {
                contact: ["1"],
                location: ["1"],
              },
              children: [
                {
                  userId: "9",
                  userName: "Jackson Yee",
                  shortName: "Jackson",
                  avatar:
                    "https://cdn.pixabay.com/photo/2015/07/27/17/14/mountains-862870__340.jpg",
                  email: "jacksonyee@yahoo.com",
                  team: "Team 1",
                  department: "FSE",
                  password: "135246103",
                  tel: "5023 2499",
                  language: "English",
                  head: "Amy Chan",
                  status: "Active",
                  userGroup: ["Group 7", "Project Team"],
                  colour: "",
                  right: [],
                  locationCode: {
                    contact: ["1"],
                    location: [],
                  },
                },
                {
                  userId: "10",
                  userName: "Kenny Chan",
                  shortName: "Kenny",
                  avatar:
                    "https://cdn.pixabay.com/photo/2019/07/25/17/09/camp-4363073__340.png",
                  email: "kennychan@yahoo.com",
                  team: "Team 1",
                  department: "FSE",
                  password: "135246103",
                  tel: "5023 2499",
                  language: "English",
                  head: "Amy Chan",
                  status: "Active",
                  userGroup: ["Group 11", "Project Team"],
                  colour: "",
                  right: ["Edit all reocrd"],
                  locationCode: {
                    contact: [],
                    location: [],
                  },
                },
                {
                  userId: "11",
                  userName: "Marco Wong",
                  shortName: "Marco",
                  avatar:
                    "https://cdn.pixabay.com/photo/2018/01/10/23/53/rabbit-3075088__340.png",
                  email: "marcowong@yahoo.com",
                  team: "Team 1",
                  department: "FSE",
                  password: "135246103",
                  tel: "5023 2499",
                  language: "English",
                  head: "Amy Chan",
                  status: "Active",
                  userGroup: ["Group 11", "Admin"],
                  colour: "",
                  right: [],
                  locationCode: {
                    contact: ["1"],
                    location: ["1"],
                  },
                },
              ],
            },
          ],
        },
      ];
      // 打开所有team手风琴
      this.openTeamIndex = this.teamList.map((item, index) => index);
      // 设置默认选中的User
      this.setDefaultSelectedUser();
      this.loading = false;
    }, 800);
  }

  setDefaultSelectedUser() {
    if (this.teamList.length > 0 && this.teamList[0].memberList.length > 0) {
      this.selectedUser = this.teamList[0].memberList[0];
    }
  }

  openNewProfile() {
    (this.$refs.profile as Profile).resetProfileData();
    this.selectedUser = null;
    this.showProfile = true;
  }

  addUser(user: IMember) {
    const team = this.teamList.find(
      (team) => team.department === user.department
    );
    if (team) {
      if (team.memberList) {
        team.memberList.push(user);
      } else {
        this.$set(team, "memberList", [user]);
      }
    }
  }

  editUser(user: IMember) {
    Object.assign(this.selectedUser as IMember, user);
  }

  created() {
    this.getTeamList();
  }

  mounted() {
    this.$bus.$on("clickAction", this.openNewProfile);
    this.$store.commit("MaintenanceStore/switchActionIcon", "mdi-plus-thick");
  }

  destroyed() {
    this.$bus.$off("clickAction");
  }
}
</script>

<style lang="scss" scoped>
@import "./User.scss";
</style>
